import { Button, Input, Radio, Select, Space, Table } from 'antd';
import { useEffect, useState } from 'react';

const resultOptions = [
  {
    value: 'consistent',
    label: '一致',
  },
  {
    value: 'inconsistent',
    label: '不一致',
  },
];

export default function Contrast(props: any) {
  const { data, mode } = props;
  const [dataSource, setDataSource] = useState([]);
  const [module, setModule] = useState(data.modules[0]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const { defines, instances, results, result, resultDesc } = module;
    const len = defines.length;
    const cm = instances.map((item) => {
      return {
        title: item.site,
        dataIndex: item.name,
        onCell: (_, index) => {
          return {
            colSpan: index === len ? 0 : 1,
          };
        },
      };
    });
    const columns = [
      {
        title: '对比项',
        dataIndex: 'name',
      },
      ...cm,
      {
        title: '一致',
        dataIndex: 'result',
        render(text: string, _: any, index: number) {
          if (mode === 'view') {
            return resultOptions.find((item) => item.value === text)?.label;
          }
          return (
            <Select
              key={module.moduleName}
              defaultValue={text}
              style={{ width: 120 }}
              options={resultOptions}
              onChange={(value) => changeResult(value, index, 'result')}
            />
          );
        },
      },
      {
        title: '备注',
        dataIndex: 'resultDesc',
        onCell: (_, index) => {
          return {
            colSpan: index === len ? instances.length + 1 : 1,
          };
        },
        render(text: string, _: any, index: number) {
          if (mode === 'view') {
            return text;
          }
          return (
            <Input
              key={module.moduleName}
              defaultValue={text}
              onChange={(e) =>
                changeResult(e.target.value, index, 'resultDesc')
              }
            />
          );
        },
      },
    ];
    const list = defines
      .map((item) => {
        const data = instances.reduce((p, n) => {
          return {
            ...p,
            key: item.key,
            [n.name]: n.attributes[item.key],
            result: results[item.key].result,
            resultDesc: results[item.key].resultDesc,
          };
        }, {});
        return {
          name: item.desc,
          ...data,
        };
      })
      .concat({
        key: 'result',
        name: '评估结果',
        result,
        resultDesc,
      });
    setColumns(columns);
    setDataSource(list);
  }, [module]);

  function selectModule(module: any) {
    setModule(module);
  }

  function changeResult(value, index, field) {
    if (index === module.defines.length) {
      module[field] = value;
    } else {
      module.results[module.defines[index].key][field] = value;
    }
  }

  return (
    <div>
      <Radio.Group
        onChange={(e) => selectModule(e.target.value)}
        defaultValue={module}
      >
        {data.modules.map((item) => {
          return (
            <Radio.Button value={item} key={item.moduleName}>
              {item.moduleName}
            </Radio.Button>
          );
        })}
      </Radio.Group>
      <Table
        columns={columns}
        dataSource={dataSource}
        bordered
        tableLayout="fixed"
      />
    </div>
  );
}
